<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul class = "list">
    <li class = "li">1</li>
    <li class = "li" id = "id-li">2</li>
    <li class = "li">3</li>
</ul>
<ul class = "list1">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class = "list2">
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    /*
    * JS    语法
    * DOM   元素的特点
    * BOM   浏览器窗口
    *
    * dom相关的操作，元素讨论
    *   1.获取元素
    *
    *       获取单个元素的方法：
    *
    *       document.querySelector("css选择器的写法") 获取单个元素（返回选中满足条件的第一个标签元素）
    *
    *       document.getElementById("元素的id名") 不要加上#等特殊符号 id名是唯一的
    *
    *
    *
    *       多个元素的获取方法：
    *
    *       //ES6的方法 通过query系列获取的一定都是 NodeList
    *       document.querySelectorAll("css选择器的写法") 获取满足条件的所有相关元素形成类数组返回
    *
    *       //ES5的方法 通过get系列获取的一定都是htmlCollection
    *       document.getElementsByClassName("元素的类名") 通过类名获取元素，形成类数组返回
    *
    *       document.getElementsByTagName("元素的标签名") 通过标签名获取元素
    *
    *       document.getElementsByName()
    *
    *
    * */

    let li = document.querySelector(".list li")

    let li2 = document.getElementById("id-li")

    let li3 = document.getElementsByClassName("li")

    let li4 = document.querySelectorAll(".li") //li4和li3获取的内容是相同的，但是两者的类数组不同

    let li5 = document.getElementsByTagName("li")

    //如果只用es5的get方法要获取list2里面的所有的li，该怎么获取
    let list2 = document.getElementsByClassName("list2")
    let liList = list2[0].getElementsByTagName("li")



    /*
    * 原来增加元素的方法：innerHTML或者innerText + 模板字符串
    *
    * 以后就用这下面的方法：
    *
    *   document.createElement("需要创建的标签的标签名") 这种方法会生成元素节点，元素对象，单个元素，但此时只是存储在内存中，不会出现在页面上
    *
    *   父元素.appendChild(创建出来的子元素) 将创建出来的子元素节点添加到想要添加的父元素节点上，添加到最后面
    * */

    let ul = document.querySelector("ul")

    let li = document.createElement("li")

    li.innerHTML = "新整的"

    ul.appendChild(li)

    // let ul = document.querySelector(".list")
    // let liList = document.querySelectorAll(".list li")
    // liList.forEach(li => li.onclick = function () {
    //   console.log(this.innerHTML)
    // })

    // 相当于重新渲染了一遍
    // 会导致页面重新渲染,生成新的li,之前的li已经消失了
    // ul.innerHTML = `<li>1</li><li>2</li><li>3</li>` + "<li>4</li>"

    // let li = document.createElement("li")
    // li.innerHTML = "4"
    // ul.appendChild(li)


    // documentFragment 文档节点片段

    // let fragment = document.createDocumentFragment()
    // for (let i = 0; i < 100000; i++) {
    //   let li = document.createElement("li")
    //   li.innerHTML = i
    //   fragment.appendChild(li) // 添加到内容中
    // }
    // ul.appendChild(fragment) // 一次性倒进去
    // 不管怎么样, 建议大家使用fragment 操作逻辑更优秀的
    // console.log(fragment)


    // 删除元素:
    // 1.一定要找到这个元素, 经过家长的允许 找到父元素

    // let li = document.querySelector("li")
    // let ul = document.querySelector(".list")
    // console.log(li.parentNode)
    // ul.removeChild(li)

    // 2.自我毁灭法 , 没有必要单独获取家长
    // 子元素.parentNode.removeChild 以父之名
    // li.parentNode.removeChild(li)

    // let liList = document.querySelectorAll("li")
    // liList.forEach(item => {
    //   item.onclick = function () {
    //     this.parentNode.removeChild(this)
    //   }
    // })

</script>
</body>
</html>